<template>
    <div class="jul-form-item">
        <label class="jul-form-item__label" :style="{width: this.Form.labelWidth}">{{label}}</label>
        <div class="jul-form-item__content">
            <slot></slot>
        </div>
    </div>
</template>

<script>
export default {
    name: 'JulFormItem',
    props: {
        label: String
    },
    inject: ['Form']
}
</script>

<style lang="scss">
    .jul-form-item {
        margin-bottom: 25px;
        .jul-form-item__label {
            text-align: right;
            vertical-align: middle;
            float: left;
            font-style: 14px;
            color: #606266;
            line-height: 40px;
            padding: 0 12px 0 0;
            box-sizing: border-box;
        }
        .jul-form-item__content {
            line-height: 40px;
            position: relative;
            font-style: 14px;
            overflow: hidden;
        }
    }
</style>
